<!--  -->
<template>
    <div>

        <van-form @submit="onSubmit">
            <!-- 头 -->
            <div class="font15 mt10 pl10">
                <span class="titletext">{{ titledata.title }}</span>
                <div class="graytext mt10 font13">
                    <span>工单编号：</span>
                    <span class="titletext">{{ titledata.pmInsId }}</span>
                </div>
            </div>
          <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
            <div class="blue_item" />
            <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">项目信息</span>
          </div>
          <van-field readonly required name="projectName" :value="fromdata.projectName" label="项目名称：" label-width="5em" autosize rows="1" type="textarea"/>
          <van-field readonly required name="projectID" :value="fromdata.projectID" label="项目编号：" label-width="5em" />
          <van-field readonly required name="customerName" :value="fromdata.customerName" label="集团名称：" label-width="5em" autosize rows="1" type="textarea"/>
          <van-field readonly required name="customerCode" :value="fromdata.customerCode" label="集团编号：" label-width="5em" />
          <van-field readonly required name="city" :value="fromdata.city" label="地市：" label-width="3em" />
          <van-field readonly required name="counties" :value="fromdata.counties" label="县区：" label-width="3em" />
          <van-field readonly name="industryBigTypeProvince" :value="fromdata.industryBigTypeProvince" label="省内行业大类：" label-width="7em" />
          <van-field readonly name="industryBigTypeGroup" :value="fromdata.industryBigTypeGroup" label="集团行业大类：" label-width="7em" />
          <van-field readonly name="industryMinTypeGroup" :value="fromdata.industryMinTypeGroup" label="集团行业小类：" label-width="7em" />
          <van-field readonly name="industryAttribution" :value="fromdata.industryAttribution" label="15大行业名称：" label-width="7.5em" />
          <van-field readonly name="industryNameOneLevel" :value="fromdata.industryNameOneLevel" label="行业一级名称：" label-width="7em" />
          <van-field readonly name="industryNameTwoLevel" :value="fromdata.industryNameTwoLevel" label="行业二级名称：" label-width="7em" />
          <van-field readonly required name="milestoneNode" :value="fromdata.milestoneNode" label="里程碑节点：" label-width="6em" />
          <van-field readonly required name="planEndDate" :value="fromdata.planEndDate" label="计划完成时间：" label-width="7em" />
          <van-field readonly required autosize type="textarea" rows="1" name="milestoneDescribe" :value="fromdata.milestoneDescribe" label="里程碑描述：" label-width="6em" />
          <van-field readonly required name="applyShutdownDate" :value="fromdata.applyShutdownDate" label="申请停工时间：" label-width="7em" />
          <van-field readonly required name="applyShutdownPerson" :value="fromdata.applyShutdownPerson" label="申请停工人：" label-width="6em" />
          <van-field readonly required name="shutdownStartDate" :value="fromdata.shutdownStartDate" label="停工开始时间：" label-width="7em" />
          <van-field readonly required name="predictRecoverDate" :value="fromdata.predictRecoverDate" label="预计复工时间：" label-width="7em" />
          <van-field readonly required autosize type="textarea" rows="1" name="shutdownReason" :value="fromdata.shutdownReason" label="停工原因：" label-width="5em" />
          <van-field readonly label="停工报告扫描件：" label-width="12em" />
          <div v-for="(fileitem) in fromdata.shutdownReportFileFile" :key="fileitem.id" style="margin-left:20px">
            <div readonly class="font14 fileLink" style="color:#0F85CF">
              <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
            </div>
          </div>

          <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
            <div class="blue_item" />
            <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">发起复工</span>
          </div>
          <van-field readonly required name="applyRecoverDate" :value="fromdata.applyRecoverDate" label="申请复工时间：" label-width="7em" />
          <van-field readonly required name="applyRecoverPerson" :value="fromdata.applyRecoverPerson" label="申请复工人：" label-width="6em" />
          <van-field readonly required name="recoverDate" :value="fromdata.recoverDate" label="实际复工时间：" label-width="7em" />
          <van-field readonly required name="deliverDate" :value="fromdata.deliverDate" label="约定交付时间：" label-width="7em"  @click="deliverDateShow = canEditDate"/>
          <van-popup v-model="deliverDateShow" position="bottom" get-container="body">
            <van-datetime-picker v-model="currentDate" :formatter="formatter" type="date" @cancel="deliverDateShow = false" @confirm="cityDecisionDateOnConfirm" />
          </van-popup>
          <van-field readonly required autosize type="textarea" rows="1" name="recoverExplanation" :value="fromdata.recoverExplanation" label="复工说明：" label-width="5em" />
          <van-field readonly label="复工报告扫描件：" label-width="12em" />
          <div v-for="(fileitem) in fromdata.recoverFile" :key="fileitem.id" style="margin-left:20px">
            <div readonly class="font14 fileLink" style="color:#0F85CF">
              <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
            </div>
          </div>
          <van-field readonly autosize type="textarea" rows="1" name="remark" :value="fromdata.remark" label="备注：" label-width="3em" />
            <!-- 跳转意见 -->
            <div class="left_botton">
                <button block type="button" @click="tomsg()" style="color:#4A90E5; display: inline-block;width:100%;border: 0px solid #4A90E5;border-radius: 15px 0px 0px 15px;
            padding:10px 10px 10px 15px;font-size:13px">意见</button>
            </div>
            <!-- 流程下一步 -->
            <div v-if="todotype||toRead" class="footer">
                <van-button block type="info" native-type="submit" :disabled="!canToNext"
                            :color="canToNext ? '#4A90E5' : '#cccccc'"
                            :style="{display: 'inline-block',width: '100%',border: canToNext ? '0px solid #4A90E5' : '0px solid #cccccc'}">{{ buttonTitle }}</van-button>
            </div>
        </van-form>
        <!-- 当前办理人 -->
        <section-header v-if="showHistory" :sectionTitle="'当前办理人'" />
        <div v-if="showHistory" class="font13 ptandpb10 pl16">
            <div>
                <span class="titletext font13">{{
                    historydata.MANAGER
                    }}</span>
            </div>
            <div class="mt5">
                <span class="graytext font12">{{ historydata.DEPARTMENT }}</span>
            </div>
        </div>
        <!-- 审批意见 -->
        <section-header id="opinion" :sectionTitle="'审批意见'" />
        <opinion-item :approveList="approveList" />
    </div>
</template>
<script>

import {
  selectShutDownAndRecoverInfoByProjectID,
  getSZTDZJFormDetail,
  getWfLinkTracks,
  getWfOptMags,
} from "@/api/dictapi";
import util from "@/assets/js/public";
import { openFileUrl } from "@/store/openFile";
import { Notify, Toast } from "vant";
import { mapGetters } from "vuex";
import aiElTable from "@/components/aiElTable/index.vue";
import OpinionItem from '../sztdzj/sztdzjDetail/opinion-item.vue';
import SectionHeader from '../sztdzj/sztdzjDetail/section-header.vue';
import moment from "moment/moment";


export default {
    data() {
      return {
        fromdata: {},
        titledata: {},
        params: this.$route.query,
        todotype: false,
        toRead: false,
        approveList: [],
        showHistory: false,
        historydata: {},
        buttonTitle: '流程下一步',
        canToNext: true,
        aiDataResult:{},
        currentDate: new Date(),
        deliverDateShow: false,
        canEditDate: false,
      };
    },
    computed: {
      ...mapGetters(["user"]),
      ...mapGetters(["userinfo"]),
    },
    //生命周期--创建完成
    created() {
        if(this.params.pmInsType==null&&this.params.processType!=null) {
          this.params.pmInsType = this.params.processType
        }
        if (this.params.todoType == "1") {
          this.todotype = true;
          this.canEditDate = true;
        }else if (this.params.todoType == "2") {
          this.showHistory = true;
          this.canEditDate = false;
        }else if (this.params.todoType == "3") {
          this.toRead = true;
          this.canEditDate = false;
        }
        if (this.params.location == 'dict.start') {
            this.canToNext = false;
            this.buttonTitle = '暂不支持手机端，请至PC办理';
        }
        this.getdetail();
    },
    //生命周期--挂载完成
    components: {
      aiElTable,
        SectionHeader,
        OpinionItem
    },
    //生命周期--挂载完成
    mounted() { },
    //方法调用
    methods: {
      tomsg() {
        document.getElementById('opinion').scrollIntoView({ behavior: 'smooth' })
      },
      formatter(type, val) {
        if (type === 'year') {
          return `${val}年`;
        }
        else if (type === 'month') {
          return `${val}月`;
        } else if (type === 'day') {
          return `${val}日`;
        }
        return val;
      },
      cityDecisionDateOnConfirm(value) {
        this.deliverDateShow = false;
        this.fromdata.deliverDate = moment(value).format('YYYY-MM-DD');
      },
      openFileUrlfun(value) {
        this.$router.push(
            {
              name: 'fileview',
              query: {
                openFileUrl: openFileUrl(value)
              }
            }
        );
      },

        getdetail() {
            Toast.loading({ message: "加载中", forbidClick: false });
            getSZTDZJFormDetail(
                Object.assign(this.params, { userName: this.user.userName })
            ).then((result) => {
                this.fromdetal = {};
                Toast.clear();
                if (!result.data) {
                    Notify(result.message);
                    return;
                }
                if (result.data.data) {
                    this.titledata = result.data.data;
                }
                this.selectShutDownAndRecoverInfoByProjectID(result.data.data.projectInformationId);
            })
          Toast.loading({ message: "加载中", forbidClick: false });
            getWfOptMags(Object.assign(this.params), {
                userName: this.user.userName,
            }).then((result) => {
                Toast.clear();
                if (!result.data) {
                    Notify(result.message);
                    return;
                }
                this.approveList = result.data.data.reverse();
            })

            if (this.showHistory) {
                getWfLinkTracks(Object.assign(this.params), {
                    userName: this.user.userName,
                }).then((result) => {
                    Toast.clear();
                    if (!result.data) {
                        Notify(result.message);
                        return;
                    }
                    if (result.data.data) {
                        //数据过滤，并生成新的数组
                        this.historydata = result.data.data.filter(
                            (item) => item.CURRENTSTATE == 10
                        )[0];
                        if (this.historydata) {
                            if (this.historydata.MANAGER) {
                                this.showHistory = true;
                            } else {
                                this.showHistory = false;
                            }
                        } else {
                            this.showHistory = false;
                        }
                    } else {
                        this.showHistory = false;
                    }
                })
            }

        },

      selectShutDownAndRecoverInfoByProjectID(value) {
        Toast.loading({ message: "加载中", forbidClick: false });
        selectShutDownAndRecoverInfoByProjectID(
                Object.assign(this.params, { userName: this.user.userName, projectID: value })
            ).then((result) => {
                this.fromdetal = {};
                Toast.clear();
                if (!result.data) {
                    Notify(result.message);
                    return;
                }
                if (result.data.data) {
                    this.fromdata = result.data.data;
                }
            });
        },

        onSubmit() {
          if (!this.fromdata.deliverDate||this.fromdata.deliverDate=='') {
            Notify('请选择约定交付时间')
            return
          }
          this.params.formData=this.fromdata;
          var formSendData={"htmlParamMap":{}};
          let maps={...this.fromdata}
          formSendData.htmlParamMap = maps;
          formSendData.id = this.titledata.id;
          formSendData.pmInsId = this.titledata.pmInsId;
          formSendData.processType = this.params.pmInsType
          formSendData.workItemId = this.params.workItemId;
          var params1 = {
            kv: {
              currentUserCode: util.encrypt(this.params.userName),
              source: 'MOBILE',
              location: this.params.location,
              processInstId: this.params.processInstId,
              processDefName: this.params.processDefName,
              processType: this.params.pmInsType,
              isClaimFun:'3',
              isClaimCounty:'3',
              isOperateCity:'3',
              isOperateCounties:'3',
              isProvinceConfirm:'3',
              isCityConfirm:'3'
            },
            body:{
              location: this.params.location,
              processInstId: this.params.processInstId,
              processDefName: this.params.processDefName,
              source: 'MOBILE'
            }
          };
          var params2 = {
            kv: {
              "currentUserCode": util.encrypt(this.params.userName),
              "source": 'MOBILE',
              "location": this.params.location,
              "processInstId": this.params.processInstId,
              'processType': this.params.pmInsType,
              'receiptCode': this.params.processInstId,
              isOperateCity:'3',
              isOperateCounties:'3',
            },
          };
          var params3 = {
            kv: {
              "source": 'MOBILE',
              "currentUserCode": util.encrypt(this.params.userName),
              "workItemId": this.params.todoType==3?"":this.params.workItemId,
              "processInstId": this.params.processInstId,
              "location": this.params.location,
              "notificationId":this.params.todoType==3?this.params.wfnid:""
            },
          };
          localStorage.setItem('submitPageParam', JSON.stringify({
            getDecisionsUrl:'decisionAndUser$api$getDecisions',
            getDecisionsParams:params1,
            getUserUrl:'decisionAndUser$api$getOrgAndUser',
            getUserParams:params2,
            tosubmintUrl:'applicationFormProject$api$startSubmitProcess',
            tosubmintParams:params3,
            formData:formSendData,
            fromMoa:this.params.fromMoa,
            itemId:this.params.itemId,
            type:this.params.todoType==3?"toRead":"toDo"
          }));
          this.$router.push(
              {
                name: 'srqrsubmit'
              }
          );
        },

    },
};
</script>

<style  scoped>
/* @import url();*/
</style>